<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <!-- @click 直接绑定 userModal 的方法即可。如果想做一些判断，可以再套一层方法 -->
      <a-button type="primary" class="mt-4 mb-4" @click="doOpenModal"> 打开弹窗 </a-button>

      <!-- 任意位置，引入弹窗组件 -->
      <ModalSendData @register="register" />
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 自定义 modal 组件
  import ModalSendData from './ModalSendData.vue';

  // vben modal 组件
  import { useModal } from '@/components/Modal';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openModal }] = useModal();

  // 自定义打开弹窗方法，打开的同时传递参数
  function doOpenModal() {
    // 传递参数
    openModal(true, {
      id: 1001,
      name: 'zhangsan',
    });
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

### 向弹窗中传参核心逻辑
* 父组件: 通过自定义方法调用 openModal 方法方式打开弹窗，打开的时候传递要传入的json 数据
* 子组件: 使用 useModalInner 方法创建组件是，传入回调函数，接收父组件传入的参数

### 其它
* 弹窗显示 ok 按钮时，必须自定义 @ok 方法，并在 @ok 方法中调用关闭弹窗方法，否则弹窗不自动关闭
* 默认情况下，弹窗关闭时不会清理弹窗中的内容，需要设置 :destroyOnClose="false" 属性，使弹窗关闭时，清理数据
`;
  }

  function getSource() {
    return `

#### 父组件
\`\`\`html
\<template\>
  <!-- @click 绑定自定义方法 -->
  <a-button type="primary" class="mt-4 mb-4" @click="doOpenModal"> 打开弹窗 </a-button>

  <!-- 任意位置，引入弹窗组件 -->
  <ModalSimple @register="register" :closeFunc="clickCloseCallBack" />
\</template\>

\<script lang="ts" setup\>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 自定义 modal 组件
  import ModalSendData from './ModalSendData.vue';

  // vben modal 组件
  import { useModal } from '@/components/Modal';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openModal }] = useModal();

  // 自定义打开弹窗方法，打开的同时传递参数
  function doOpenModal() {
    // 传递参数
    openModal(true, {
      id: 1001,
      name: 'zhangsan',
    });
  }
\</script\>

### Modal 组件
\`\`\`html
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    @ok="closeModal"
    title="接收父组件参数"
    :helpMessage="['接收id, 查询详情等场景']"
    :destroyOnClose="false"
  >
    <p> 接收到的参数:{{ receiveData }} </p>
    <p> 用户id:<input class="b-1" :value="receiveData.id" /> </p>
    <p> 用户名:<input class="b-1" :value="receiveData.name" /> </p>
    <p> destroyOnClose属性:<input class="b-1" placeholder="测试关闭清理" /> </p>
  </BasicModal>
</template>
\<script lang="ts" setup\>
  // BasicModal 和 useModalInner 为 vben 基于 ant Modal 封装的组件
  import { BasicModal, useModalInner } from '@/components/Modal';

  interface User {
    id?: number;
    name?: string;
  }

  // 定义变量，接收参数
  let receiveData: User = {};

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeModal }] = useModalInner((data) => {
    console.log('接收到参数:', data);
    receiveData = data;
  });
\</script\>
\`\`\`


\`\`\`

`;
  }
</script>
